<!-- 滑动图片验证码 -->
<template>
  <div class="captcha-container">
    <!-- 背景图片 -->
    <img :src="backgroundImage" alt="Background" class="background-image" />
    <!-- 缺口图片 -->
    <img :src="gapImage" alt="Gap" class="gap-image" :style="{ left: gapLeft + 'px', top: gapTop + 'px' }" />
    <!-- 滑块 -->
    <el-slider v-model="sliderValue" :min="0" :max="backgroundWidth - gapWidth" @change="checkCaptcha" class="slider">
      <template #start>
        <span>滑动验证</span>
      </template>
      <template #end>
        <span>完成</span>
      </template>
    </el-slider>
    <!-- 提示信息 -->
    <div v-if="message" class="message">{{ message }}</div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import bdimg from '@/views/module components/Imgss/滑动模块.jpg'

// 背景图片和缺口图片的 URL
const backgroundImage = ref(bdimg);
const gapImage = ref('https://example.com/gap.jpg');

// 背景图片和缺口图片的尺寸
const backgroundWidth = 300;
const backgroundHeight = 150;
const gapWidth = 50;
const gapHeight = 50;

// 缺口的随机位置
const gapLeft = ref(Math.floor(Math.random() * (backgroundWidth - gapWidth)));
const gapTop = ref(Math.floor(Math.random() * (backgroundHeight - gapHeight)));

// 滑块的值
const sliderValue = ref(0);

// 提示信息
const message = ref('');

// 检查验证码是否验证成功
const checkCaptcha = () => {
  if (Math.abs(sliderValue.value - gapLeft.value) < 5) {
    message.value = '验证成功';
  } else {
    message.value = '验证失败，请重试';
    // 重置滑块位置和缺口位置
    sliderValue.value = 0;
    gapLeft.value = Math.floor(Math.random() * (backgroundWidth - gapWidth));
    gapTop.value = Math.floor(Math.random() * (backgroundHeight - gapHeight));
  }
};
</script>

<style scoped>
.captcha-container {
  position: relative;
  width: 300px;
  height: 150px;
  margin: 20px auto;
}

.background-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gap-image {
  position: absolute;
  width: 50px;
  height: 50px;
}

.slider {
  margin-top: 10px;
}

.message {
  margin-top: 10px;
  text-align: center;
  color: red;
}
</style>